<template>
	<div class="shortcuts-panel">
		<el-card shadow="hover">
			<template #header>
				<svg-icon icon-class="menu" />
				<el-text type="info">
					快捷入口
				</el-text>
			</template>
			<el-scrollbar v-loading="loading" height="200">
				<template v-if="shortcuts.length <= 0">
					<el-empty :image-size="60" />
				</template>
				<template v-else>
					<el-space wrap :size="20">
						<ul class="menu-wrapper">
							<li class="menu-item" v-for="item in shortcuts" @click="onClick(item)" :title="item.title">
								<el-button type="danger" class="close-btn" circle icon="close"
									@click.stop="handleRemove(item)"></el-button>
								<svg-icon :icon-class="item.icon" class-name="icon" />
								<span class="title">{{ item.title }}</span>
							</li>
						</ul>

					</el-space>
				</template>
			</el-scrollbar>
		</el-card>
	</div>

</template>

<script>
export default {
	title: '快捷入口',
	icon: 'Menu',
	description: '快捷入口',
};
</script>

<script setup name="sysshortcuts">
import useShortcutStore from '@/store/modules/shortcut'

//---------------------------------变量定义---------------------------------
const { proxy } = getCurrentInstance()
const loading = ref(false)
const routes = useRouter().getRoutes();
const shortcutsStore = useShortcutStore();

const shortcuts = computed(() => {
	let data = shortcutsStore.shortcuts
	let computedValue = [];
	data.forEach(item => {
		if (item.menuId) {
			let route = routes.find(s => s.meta["id"] == item.menuId);
			if (route) {
				computedValue.push({
					icon: route.meta["icon"],
					route: route.path,
					menuId: route.meta["id"],
					title: route.meta["title"],
				});
			}
		}
	});
	return computedValue;
})


//---------------------------------功能函数---------------------------------

function handleRemove(tag) {
	proxy.$modal.confirm('确认删除该快捷方式？').then(function () {
		loading.value = true;
		shortcutsStore.removeShortcut({ menuId: tag.menuId }).then((res) => {
			proxy.$modal.msgSuccess("删除成功")
		}).finally(res => {
			loading.value = false;
		})
	})
}

function onClick(tag) {
	proxy.$router.push({
		path: tag.route,
	})
}
</script>


<style lang="scss" scoped>
ul,
li {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-wrapper {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 10px;

	.menu-item {
		font-size: 10px;
		text-align: center;
		padding: 8px;
		width: 70px;
		cursor: pointer;
		background-color: var(--el-color-info-light-8);
		color: var(--el-text-color-secondary);
		position: relative;



		&:hover {
			background: var(--el-color-info-light-7);

			.close-btn {
				display: block;

				&:hover {
					scale: 1;
				}
			}
		}

		.close-btn {
			scale: .7;
			display: none;
			position: absolute;
			right: -10px;
			top: -10px;
		}

		.icon {
			width: 3em;
			height: 3em;
		}

		.title {
			display: block;
			width: 100%;
			line-height: 20px;
			padding-top: 5px;
			word-wrap: break-word;
			white-space: nowrap;
			/* 不允许文本换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 超出部分显示省略号 */
		}
	}
}
</style>

<style lang='scss' scoped>
:deep(.el-card) {
	.el-card__header {
		display: flex;
		flex-direction: row;
		padding: 0 !important;
		margin: 0;
		align-items: center;

		.svg-icon {
			width: 30px;
			height: 30px;
		}
	}
}
</style>